<template>
  <el-dialog
    :model-value="tbPositionTkVisible"
    title="选择表位置"
    width="70%"
    :before-close="handleClose"
    @open="handleOpen"
  >
    <div class="tb-position">
      <!-- 台区显示内容 -->
      <div class="station-area">
        <div
          :class="
            'station-area-item ' +
            (item.state && item.orgId && !item.bg ? 'cursorCss ' : '') +
            (item.bg ? 'redBg' : '')
          "
          v-for="item in posList"
          @click="changeBg(item)"
        >
          <p class="item1" style="margin-top: 10px">
            {{ item.pname }}
          </p>
          <p class="item2">{{ item.label }}</p>
          <p class="item3">
            <img v-if="item.state" src="@/assets/images/station-area1.png" />
            <img v-else src="@/assets/images/station-area2.png" />
          </p>
          <p class="item2" style="margin-top: 30px">{{ item.name }}</p>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="handle"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useAppStore, paramsDataStore } from "@/stores";
import { storeToRefs } from "pinia";

const emit = defineEmits(["changeBw"]);
const props = defineProps({
  currentId: Number,
  currentPname: String,
  meterId: Number,
  meterWiringId: Number,
  type: Number,
});
const useApp = useAppStore();
let { tbPositionTkVisible, meterWiringIds, meterIds, organStructure } =
  storeToRefs(useApp);
const paramsData = paramsDataStore();
let { stationArea, newStationArea, selectedArea } = storeToRefs(paramsData);

const tableData = ref([]);
const currentBw = ref([]);
const posList = ref([]);
const arr = [3, 4, 7, 8];

// 关闭弹窗
const handleClose = () => {
  tbPositionTkVisible.value = false;
  currentBw.value = [];
};
// 点击确定
const handle = () => {
  emit("changeBw", currentBw.value);
  tbPositionTkVisible.value = false;
};
const changeBg = (row) => {
  // currentBw.value = [];
  if (row.state && row.orgId && !row.bg) {
    let data = JSON.parse(JSON.stringify(stationArea.value));
    if (props.type === 1)
      data = JSON.parse(JSON.stringify(newStationArea.value));
    data.forEach((item) => {
      item.bg = false;
      if (props.type != 1) {
        if (meterIds.value.includes(item.orgId)) {
          item.bg = true;
        }
        if (props.meterId === item.orgId) {
          item.bg = false;
        }
      } else {
        if (meterWiringIds.value.includes(item.position)) {
          item.bg = true;
        }
        if (props.meterWiringId === item.position) {
          item.bg = false;
        }
      }
      if (item.value === row.value) {
        item.bg = true;
      }
    });
    currentBw.value = row;
    if (props.type === 1) newStationArea.value = data;
    else stationArea.value = data;
    posList.value = data;
  }
};
// 打开弹窗
const handleOpen = () => {
  let newData = loopDataStation(organStructure.value[0].children, []);
  stationArea.value.forEach((item) => {
    item.bg = "";
    if (item.state) {
      let newArr = newData.filter(
        (item1) => item1.position === Number(item.value)
      );
      if (newArr[0]) {
        item.orgId = newArr[0].id;
        item.position = newArr[0].position;
        if (meterIds.value.includes(item.orgId)) {
          item.bg = true;
        }
        if (props.meterId === item.orgId) item.bg = true;
        item.pname = newArr[0].pname;
        item.name = newArr[0].name;
      }
      console.log("p", props.meterId, item);
    }
  });
  newStationArea.value.forEach((item) => {
    item.bg = "";
    if (item.state) {
      let newArr = newData.filter(
        (item1) => item1.position === Number(item.value)
      );
      if (newArr[0]) {
        item.orgId = newArr[0].id;
        item.position = newArr[0].position;
        if (meterWiringIds.value.includes(item.position)) {
          item.bg = true;
        }
        if (props.meterWiringId === item.position) item.bg = true;
        item.pname = newArr[0].pname;
        item.name = newArr[0].name;
      }
      console.log("555", newArr, meterWiringIds.value);
    }
  });
  if (props.type === 1) {
    posList.value = JSON.parse(JSON.stringify(newStationArea.value));
  } else {
    posList.value = JSON.parse(JSON.stringify(stationArea.value));
  }
  console.log(stationArea, newStationArea.value, props.type, props.meterId);
};
const loopDataStation = (data, newData) => {
  data.forEach((item) => {
    if (item.position && arr.includes(item.type)) {
      newData.push(item);
    }
    if (item.children) {
      loopDataStation(item.children, newData);
    }
  });
  return newData;
};
</script>
<style lang="scss" scoped>
.tb-position {
  .station-area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    .station-area-item {
      flex: 1;
      height: 125px;
      background-color: #cacaca;
      text-align: center;
      /* 间隙为5px */
      margin: 0 5px 5px 0;
      /* END */

      /* 这里的10px = (分布个数8-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
      width: calc((100% - 35px) / 8);
      /* END */

      /* 加入这两个后每个item的宽度就生效了 */
      min-width: calc((100% - 35px) / 8);
      max-width: calc((100% - 35px) / 8);

      /* END */
      &:nth-child(8n) {
        /* 去除第3n个的margin-right */
        margin-right: 0;
      }

      p {
        height: 20px;
      }
    }
  }
}
.cursorCss {
  cursor: pointer;
}
.redBg {
  background-color: #9ce0d7 !important;
}
</style>
